//监控区域模块
(function () {
    $('.monitor .tabs').on('click', 'a', function () {
        $(this).addClass('active').siblings('a').removeClass('active')

        $('.monitor .content').eq($(this).index()).show().siblings('.content').hide();
    });

    $('.marquee-view .marquee').each(function () {
        var rows = $(this).children().clone();
        $(this).append(rows);
    })
})();
(function () {
    //实例化对象
    var myChart = echarts.init(document.querySelector('.pie'));
    //指定配置和数据
    var option = {
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff"
        ],
        series: [{
            name: "点位统计",
            type: "pie",
            //如果是radius写百分比  必须加引号
            radius: ['10%', '70%'],
            center: ["50%", "50%"],
            roseType: "radius",
            data: [{
                    value: 20,
                    name: "云南"
                },
                {
                    value: 26,
                    name: "北京"
                },
                {
                    value: 24,
                    name: "山东"
                },
                {
                    value: 25,
                    name: "河北"
                },
                {
                    value: 20,
                    name: "江苏"
                },
                {
                    value: 25,
                    name: "浙江"
                },
                {
                    value: 30,
                    name: "四川"
                },
                {
                    value: 42,
                    name: "湖北"
                }
            ],
            // 修饰饼形图文字相关的样式 label对象
            label: {
                fontSize: 10
            },
            // 修饰引导线样式
            labelLine: {
                length: 6,
                length2: 8
            }

        }]

    };
    //配置项和数据给我们的实例化对象
    myChart.setOption(option);

    window.addEventListener('resize', function () {
        myChart.resize();
    })
})();

(function () {
    var item = {
        name: '',
        value: 1200,
        //修改当前柱形的样式
        itemStyle: {
            color: '#254065'
        },
        //鼠标放到柱子不高亮显示
        emphasis: {
            lineStyle: {
                color: '#254065'
            }
        },
        // 3. 鼠标经过柱子不显示提示框组件
        tooltip: {
            extraCssText: 'opacity: 0',

        }
    };
    var mychart = echarts.init(document.querySelector('.bar'));
    var option = {
        // 修改线性渐变色方式 
        color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0, 0, 0, 1,
            [{
                    offset: 0,
                    color: '#00fffb'
                }, // 0 起始颜色
                {
                    offset: 1,
                    color: '#0061ce'
                } // 1 结束颜色
            ]
        ),
        // 工具提示
        tooltip: {
            // 触发类型  经过轴触发axis  经过轴触发item
            trigger: 'item',
        },
        // 图表边界控制
        grid: {
            // 距离 上右下左 的距离
            left: '0%',
            right: '4%',
            bottom: '3%',
            top: '3%',
            // 是否包含文本
            containLabel: true,
            show: true,
            //grid 四条边框的颜色
            borderColor: "rgba(0, 240, 255, 0.3)"
        },
        // 控制x轴
        xAxis: [{
            // 使用类目，必须有data属性
            type: 'category',
            // 使用 data 中的数据设为刻度文字
            data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
            // 刻度设置
            axisTick: {
                // true意思：图形在刻度中间
                // false意思：图形在刻度之间
                alignWithLabel: false,
                show: false
            },
            //x轴上文字的颜色
            axisLabel: {
                color: '#4c9bfd'
            },
            //x轴这条线的颜色
            axisLine: {
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)'
                }
            }
        }],
        // 控制y轴
        yAxis: [{
            // 使用数据的值设为刻度文字
            type: 'value',
            // 刻度设置
            axisTick: {
                // true意思：图形在刻度中间
                // false意思：图形在刻度之间
                alignWithLabel: false,
                show: false
            },
            //x轴上文字的颜色
            axisLabel: {
                color: '#4c9bfd'
            },
            //x轴这条线的颜色
            axisLine: {
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)'
                }
            }
        }],
        // 控制x轴
        series: [{
            // 图表数据名称
            name: '用户统计',
            // 图表类型
            type: 'bar',
            // 柱子宽度
            barWidth: '60%',
            // 数据
            data: [2100, 1900, 1700, 1560, 1400, item,
                item, item, 900, 750, 600, 480, 240
            ]
        }],
    };
    mychart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        mychart.resize();
    });
})();
// 销售统计模块
(function () {
    //4.(1)  准备数据
    var data = {
        year: [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ],
        quarter: [
            [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
            [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
        ],
        month: [
            [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
            [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
        ],
        week: [
            [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
            [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
        ]
    };
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".line"));
    // 2. 指定配置和数据
    var option = {
        color: ['#00f2f1', '#ed3f35'],
        tooltip: {
            trigger: "axis"
        },
        //修改图例组件中的文字颜色 #4c9bfd， 距离右侧 right 为 10%
        legend: {
            data: ["预期销售额", "实际销售额"],
            textStyle: {
                color: '#4c9bfd'
            },
            right: '10%' //距离右边10%
        },
        grid: {
            top: '20%',
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
            show: true, //显示边框
            borderColor: '#012f4a',
        },

        xAxis: {
            type: "category",
            boundaryGap: false, // 去除轴内间距
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisTick: {
                show: false, //去除刻度线
            },
            axisLabel: {
                color: '#4c9bfd'
            },
            asisLine: {
                show: false // 去除轴线
            }

        },
        yAxis: {
            type: "value",
            axisTick: {
                show: false, //去除刻度线
            },
            axisLabel: {
                color: '#4c9bfd' // 文字颜色
            },
            asisLine: {
                show: false // 去除轴线
            },
            splitLine: {
                lineStyle: {
                    color: '#012f4a' // 分割线颜色
                }
            }
        },
        series: [{
                name: "预期销售额",
                type: "line",
                stack: "总量",
                smooth: true,
                data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120]
            },
            {
                name: "实际销售额",
                type: "line",
                stack: "总量",
                smooth: true,
                data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
            }
        ]
    };

    // 3. 把配置和数据给实例对象
    myChart.setOption(option);
    //4.切换tab栏  切换数据
    $('.sales .caption').on('click', 'a', function () {
        //要把当前的索引号给后面的index
        index = $(this).index() - 1;
        // 点击当前a 高亮显示 调用active
        $(this).addClass('active').siblings('a').removeClass('active');
        // console.log(this.dataset.type);
        // console.log(data[this.dataset.type]);
        var arr = data[this.dataset.type];
        option.series[0].data = arr[0];
        option.series[1].data = arr[1];
        // 重新把配置和数据给实例对象
        myChart.setOption(option);
    });
    //5.tab栏自动切换效果
    var as = $('.sales .caption a');
    var index = 0;
    var timer = setInterval(function () {
        index++
        if (index >= 4) {
            index = 0;
        }
        as.eq(index).click();
    }, 1000);
    //当鼠标经过停止计时器
    $('.sales').hover(function () {
        clearInterval(timer);
    }, function () {
        timer = setInterval(function () {
            index++
            if (index >= 4) {
                index = 0;
            }
            as.eq(index).click();
        }, 1000);
    });
    //当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();